<template>
	<div>
		<div v-transfer-dom>
			<loading :show="show1" @click.native="showLoading"  :text="text1"></loading>
		</div>

<a id="share_btn" @click="aab">分享到朋友圈</a>
<div id="shareit" @click="shareit" v-show="show">
  <img class="arrow" src="../assets/fenxiang.png">
  <a href="#" id="follow">
    <img id="share-text" src="http://dev.vxtong.com/cases/nuannan/imgs/share-text.png">
		<p>快快分享给您的好友看看吧~</p>
  </a>
</div>
	</div>
</template>

<script>
	import { Loading, Group, XSwitch, XButton, TransferDomDirective as TransferDom } from 'vux'

	export default {
		directives: {
			TransferDom
		},
		components: {
			Loading,
			Group,
			XSwitch,
			XButton
		},
		data() {
			return {
				show1: false,
				text1: 'Processing',
				show:false
			}
		},
		methods: {
			showLoading() {
				this.$vux.loading.show({
					text: 'Loading'
				})
				setTimeout(() => {
					this.$vux.loading.hide()
				}, 2000)
			},
			show1change(val) {
				if(val) {
					tick(0, (percent) => {
						if(percent === 100) {
							this.show1 = false
							return
						}
						this.text1 = `${percent}%`
					})
				}
			},
			aab(){
				this.show= true;

			},
			shareit(){
				this.show= false;
			}
    },
    created(){
			this.showLoading();
    }
	}
</script>


<style lang="less">

#shareit {
  -webkit-user-select: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  text-align: center;
  top: 0;
  left: 0;
  z-index: 105;
}
#shareit img {
  max-width: 100%;
}
.arrow {
  position: absolute;
  right: 10%;
  top: 5%;
}
#share-text {
  margin-top: 400px;
}

</style>
